<!--
 * @Author: liwei 474083297@qq.com
 * @Date: 2024-05-08 07:20:46
 * @LastEditors: liwei 474083297@qq.com
 * @LastEditTime: 2024-05-21 10:59:08
 * @FilePath: /app/src/components/rigthTable.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<div class="rigth-table">
		<p>人员列表</p>
		<el-table
			stripe
			border
			highlight-current-row
			:data="users"
			style="width: 100%"
		>
			<el-table-column type="index" label="序号" width="130" align="center" />
			<el-table-column prop="id" label="id" align="center"> </el-table-column>
			<el-table-column prop="name" label="姓名" align="center">
			</el-table-column>
			<el-table-column prop="gender" label="性别" align="center">
				<template slot-scope="scope">
					<p>{{ scope.row.gender == 1 ? '男' : '女' }}</p>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<el-button type="text" size="mini" @click="authClicked(scope.row)"
						>授权组织结构</el-button
					>
					<el-button
						type="text"
						size="mini"
						@click="authAdminClicked(scope.row)"
						>授权管理</el-button
					>
				</template>
			</el-table-column>
		</el-table>

		<el-dialog
			title="组织结构树"
			:visible.sync="dialogVisible"
			width="width"
			:before-close="dialogBeforeClose"
		>
			<div class="tree-container">
				<el-tree
					:data="treeData"
					show-checkbox
					node-key="id"
					ref="authTree"
					highlight-current
					:props="defaultProps"
				>
				</el-tree>
			</div>
			<div slot="footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="authConfirmClicked">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
// import AuthTree from './authTree.vue';

import axios from 'axios';
export default {
	name: 'AppRigthTable',
	props: {
		users: {
			type: Array,
			default: () => []
		}
	},

	data() {
		return {
			dialogVisible: false,
			treeData: [],
			defaultProps: {
				children: 'children',
				label: 'name'
			},
			// 当前被授权操作的用户
			actionUser: null,
			loading: {}
		};
	},

	mounted() {},

	methods: {
		loadingAction() {
			this.loading = this.$loading({
				lock: true,
				text: '加载中..',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			});
		},

		authClicked(t) {
			console.log(t);
			this.actionUser = t;
			this.dialogVisible = true;
			setTimeout(() => {
				this.treeData = this.$appData.treeData;
			}, 1);
		},
		authAdminClicked(t) {
			this.loadingAction();
			this.actionUser = t;
			let currentLoginedUser = localStorage.getItem('currentUser');
			const config = {
				url: '/tjDemo/auth/authorizeAdmin',
				method: 'post',
				headers: {
					'Content-Type': 'application/json'
				},
				// 请求体数据，这里以 JSON 格式为例
				data: {
					operateUser: currentLoginedUser,
					name: this.actionUser?.name,
					userId: this.actionUser?.id,
					amdincode: '1'
				}
			};
			axios(config).then(response => {
				let data = response.data;
				if (data === '授权成功') {
					this.$message({ message: '授权成功', type: 'success' });
				}
				this.loading.close();
				this.loading = null;
			});
		},
		authConfirmClicked() {
      /*
      * 在 Vue.js 中，$refs 是一个对象，它包含了由 ref 属性注册的所有 DOM 元素或子组件实例。当你在一个 Vue 组件的模板中给某个元素或子组件添加 ref 属性时，你可以在组件的实例中通过 this.$refs 访问到它们。
        ref 和 $refs 主要用于以下场景：
        访问 DOM 元素: 如果你需要直接操作某个 DOM 元素（例如，聚焦一个输入框），你可以给该元素添加一个 ref 属性，并在组件的方法中使用 this.$refs.[refName] 来访问它。
        访问子组件实例: 当你需要从父组件访问子组件的公共方法或属性时，你可以在子组件的根元素上使用 ref 属性。这样，你就可以在父组件中调用子组件的方法或读取其数据。
        注意事项:
        this.$refs 只有在组件的 mounted 钩子函数或之后才能保证包含正确的 DOM 元素或子组件实例。在 created 钩子中使用 this.$refs 可能会得到 undefined，因为此时 DOM 还未生成。
        使用 ref 和 $refs 应该谨慎，因为它们鼓励直接操作 DOM 或子组件，这可能违反 Vue 的响应式原则。尽量只在必要时使用它们，比如在用户交互事件处理中。
      * */
      // 将所有被选中的节点组成的数组封装到list
			let list = this.$refs.authTree.getCheckedNodes();

      // console.log('list数据1', list);
      this.dialogBeforeClose();
			if (list == null || list.length === 0) return;

			// console.log('进行授权----', list);
			// 被选中的节点的父节点组成的数组
			let halfList = this.$refs.authTree.getHalfCheckedNodes();
      // console.log('list数据2', halfList);
      // console.log('list数据3', halfList[0].children);

			halfList.push(list[0]);
      // console.log("list【0】", list[0])// list[0] 总裁助理级人员
      // console.log("list【1】", list[1]);
      // console.log("list【2】", list[2]);
      // console.log("halfList", halfList);// halfList 总部 考核机关 总裁助理
      // 清空上级节点的所有children 仅保留上级目录 总部 考核机关 总裁助理
			for (const item of halfList) {
				if (item.children && item.children.length > 0) {
          // console.log('item数据1', item);
          // console.log('item数据2', item.children);
					item.children = [];
          // console.log("new")
          // console.log('item数据1new', item);
          // console.log('item数据2new', item.children);
				}
			}
			// eslint-disable-next-line no-unreachable
      let authorizeCode = [];
      for (const item of list){
        authorizeCode.push(item.code);
      }
      console.log("authorizeCode",authorizeCode)

      // 测试数据
			this.authAction(list[0].code, halfList);
      console.log("list[0]",list[0].code) // 00001000014500077030
      console.log("list[0]id",list[0].id) //
      console.log("list长度",list.length) // 数量是授权的数量
      console.log("list的所有",list)
		},

		dialogBeforeClose() {
			this.dialogVisible = false;
			this.treeData = [];
		},
		getCheckedNodes() {},
    // 授权
		authAction(accessiblecode, accessibleInfo) {
			this.loadingAction();
			let currentLoginedUser = localStorage.getItem('currentUser');
      const config = {
				url: '/tjDemo/auth/authorize',
				method: 'post',
				headers: {
					'Content-Type': 'application/json'
				},
				// 请求体数据，这里以 JSON 格式为例


				data: {
					operateUser: currentLoginedUser,
					name: this.actionUser?.name,
					userId: this.actionUser?.id,
          accessiblecodeArrayList: [
            "00001000014500077043",
            "0000100001450007704399001",
            "00001000014500077030",
            "0000100001450007703099001",
            "0000100001450007703099002",
            "0000100001450007703099003",
            "0000100001450007703099006",
            "0000100001450007703099005",
            "0000100001450007703099004"
          ],
					accessiblecode: accessiblecode,// 00001000014500077043
					accessibleNodeInfo: JSON.stringify(accessibleInfo)
				}
			};
			axios(config).then(response => {
				let data = response.data;
				if (data === '授权成功') {
					this.$message({ message: '授权成功', type: 'success' });
				}
				console.log('http://localhost:8080/auth/authorize------', data);
				this.loading.close();
				this.loading = null;
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.rigth-table {
	width: 100%;
	height: 100vh;
	background-color: rgb(246, 246, 246);
	// border: 1px whitesmoke solid;
	padding-left: 12px;
	padding-right: 12px;
	margin-left: 6px;
	// margin-right: 12px;
	// border: 1px solid rgb(221, 218, 218);
	padding-top: 40px;

	.top-login {
		width: 100%;
	}

	.tree-container {
		overflow: scroll;
		height: 500px;
		width: 80%;
	}
}
</style>
